<template>
  <div class="wrapper">
    <div class="top-box">
      <div class="t1">
        <div class="l1"></div>
        <div class="r1">
          <div class="t">{{ dataArr[0].xm }}</div>
          <div class="b">
            <div class="value-wrapper">
              <span>{{ dataArr[0].sz }}</span>
              <span>{{ dataArr[0].dw }}</span>
            </div>
            <div class="desc">
              <span>{{ dataArr[1].xm }}</span>
              <span>{{ dataArr[1].sz }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="b1">
        <span>对比全省三大港口占比</span>
        <PortThroughputChart />
      </div>
    </div>
    <div class="bottom-box">
      <div class="t">{{ dataArr3[0].xm }}</div>
      <div class="b">
        <div class="value-wrapper">
          <span>{{ dataArr3[0].sz }}</span>
          <span>{{ dataArr3[0].dw }}</span>
        </div>
        <div class="desc">
          <span>{{ dataArr3[1].xm }}</span>
          <span>{{ dataArr3[1].sz }}</span>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="t">{{ dataArr3[2].xm }}</div>
      <div class="b">
        <div class="value-wrapper">
          <span>{{ dataArr3[2].sz }}</span>
          <span>{{ dataArr3[2].dw }}</span>
        </div>
        <div class="desc">
          <span>{{ dataArr3[3].xm }}</span>
          <span>{{ dataArr3[3].sz }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import PortThroughputChart from './PortThroughputChart.vue'

export default {
  name: 'PortThroughput',
  components: {
    PortThroughputChart
  },
  data() {
    return {
      dataArr: [[], []],
      dataArr3: [[], [], [], []]
    }
  },
  created() {
    this.loadData()
    this.loadData3()
  },
  methods: {
    async loadData() {
      const res = await getAction(
        '/topic/data/listAllBySql/dy_ydd_jtys_dfjtys_gk',
        { lb: '港口总吞吐量' }
      )
      if (res.success) {
        this.dataArr = res.result
      }
    },
    async loadData3() {
      const res = await getAction(
        '/topic/data/listAllBySql/dy_ydd_jtys_dfjtys_gk',
        { lb: '港口吞吐量' }
      )
      if (res.success) {
        this.dataArr3 = res.result
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 157px 76px;
  grid-template-columns: repeat(2, 200px);
  gap: 9px 13px;

  .top-box {
    grid-column: 1 / -1;
    padding: 13px;
    height: 100%;
    display: grid;
    grid-template-rows: 62px 1fr;
    gap: 8px;
    border: 1px solid #2b659c;

    .t1 {
      display: flex;
      align-items: center;

      .l1 {
        margin-right: 10px;
        width: 122px;
        height: 62px;
        background: url('../../images/right/r-t-icon.png') no-repeat;
      }

      .t {
        text-align: revert;
      }
      .desc {
        margin-left: 20px;
      }
    }

    .b1 {
      span:first-child {
        font-family: MicrosoftYaHeiUI;
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
  .bottom-box {
    padding: 14px 16px;
    width: 200px;
    height: 76px;
    background: url('../../images/left/l-b-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .t {
    text-align: center;
    font-family: MicrosoftYaHeiUI;
    font-size: 16px;
    color: #ffffff;
  }
  .b {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .value-wrapper {
    display: flex;
    align-items: baseline;

    span:first-child {
      margin-right: 4px;
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #16fdf5;
      line-height: 1.5;
    }
    span:last-child {
      font-family: MicrosoftYaHeiUI;
      font-size: 14px;
      color: #ffffff;
    }
  }
  .desc {
    display: flex;
    align-items: baseline;

    span:first-child {
      margin-right: 2px;
      font-family: MicrosoftYaHeiUI;
      font-size: 14px;
      color: #fffffe;
    }
    span:last-child {
      font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
      font-weight: bold;
      font-size: 20px;
      color: #ffde00;
    }
  }
}
</style>
